<!--首页的-我要注册-->
<template>
  <div>
    <div class="register-tab displayflex">
      <label class="label flex1">
        <input type="radio" name="card" value="1" v-model="classfiy">
        <span class="txt">个人注册</span>
      </label>
      <label class="label flex1">
        <input type="radio" name="card" value="2" v-model="classfiy">
        <span class="txt">企业注册</span>
      </label>
    </div>
    <div class="form-wrap">
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label"><span class="red">*</span>公司名称</div> 
          <div class="ipt flex1">
            <input type="text" placeholder="点击输入" v-model="CropName">
          </div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label"><span class="red">*</span>姓名</div> 
          <div class="ipt flex1">
            <input type="text" placeholder="点击输入" v-model="Contacts">
          </div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label"><span class="red">*</span>手机号</div> 
          <div class="ipt flex1">
            <input type="text" placeholder="点击输入" v-model="ContactTel">
          </div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label"><span class="red">*</span>验证码</div> 
          <div class="ipt flex1">
            <input type="text" placeholder="点击输入" v-model="telcode">
          </div>
          <div class="btn-code" @click="runcode">{{btntext}}</div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label"><span class="red">*</span>密码</div> 
          <div class="ipt flex1">
            <input type="password" placeholder="点击输入" v-model="pw">
          </div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label"><span class="red">*</span>确认密码</div> 
          <div class="ipt flex1">
            <input type="password" placeholder="点击输入" v-model="pws">
          </div>
        </div>
      </div>
      <div class="form-choice" v-if="classfiy==1">
        <popup-picker class="vux-form-require" title="角色" :data="roleType.list" :columns="3" v-model="roleType.value" placeholder="点击选择" value-text-align="left" :show-name="roleType.show"></popup-picker>
      </div>
    </div>
    <div class="mt30 mb30 plr20">
      <div class="btn-large" @click="getData()">注 册</div>
    </div>
    <p class="register-tip plr20 mb30">点击“注册”代表您已阅读并同意以下协议：<a href="" class="register-link">《恋链服务协议》</a></p>
    <div class="txt-center mt30 mb30"><a @click="goLogin" class="register-link">去登录</a></div>
    <div class="logo-img"><img src="~images/logo/login_logo.png"></div>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      classfiy:'1',
      Contacts: '',
      ContactTel: '',
      CropName:'',
      pw:'',
      pws:'',
      code:'',
      telcode:'',
      btntext:'点击获取',
      second:60,
      disabled:false,
      roleType:{
        list:[{
                'value': 'Salesman',
                'name': '业务员'
                },
                // {
                // 'value': 'Hospital',
                // 'name': '医院'
                // }, 
                // {
                //     'value': 'Dispatch',
                //     'name': '运输调度'
                // }, 
                {
                    'value': 'Warehouse',
                    'name': '仓管'
                }, 
                {
                    'value': 'BillingClerk',
                    'name': '开票员'
                }, 
                {
                    'value': 'ServiceManager',
                    'name': '业务经理'
                },
                 {
                    'value': 'Driver',
                    'name': '配送员'
                }],
        value:[],
        show:true
      },
    };
  },
  created(){
    document.title = '注册';
  },
  methods: {
    goLogin(){
      this.$router.push({
        path:'/login'
      });
    },
    runcode: function() {
      var self = this;
      var testTel = /^1[345789]\d{9}$/;
      if(!this.ContactTel || !testTel.test(this.ContactTel)){
        this.Toast('请输入您的正确手机号码！');
        return false;
      } 
      if(this.disabled){
        return false;
      }
      this.clock = setInterval(self.sendCode, 1000);
      var Num = "";
      for (var i = 0; i < 4; i++) {
        Num += Math.floor(Math.random() * 10);
      }
      this.code = Num;
      var Content = '【恋链】 您的验证码是：' + this.code + '。如非本人操作，请忽略本短信';
      this.telcode= this.code;//可注释
      var query={
            ContactTel:this.ContactTel,
            Content:Content,
          };
      // this.Ajax.post('SendMessage',query).then(function (resp){
      //   if (resp.Data.Status != '0') {
      //     this.Toast({
      //         message: '验证码发送失败，请稍后再试！',
      //     });
      //   }else if(resp.IsSuccess && resp.Data.Status == '0'){
      //     this.Toast({
      //         message: '验证码发送成功！',
      //     });
      //   }
      // });
    },
    sendCode: function() {
      var self = this;
      this.second--;
      this.disabled = true;
      this.btntext = this.second + '秒后可重新获取';
      if (this.second == 0) {
        clearInterval(self.clock);
        this.second = 60;
        this.btntext = '点击获取';
        this.disabled = false;
      }
    },
    getData: function() {
      if (this.CropName == '') {
        this.Toast('请输入您的单位名称！');
        return false;
      }
      if (this.Contacts === '') {
        this.Toast('请输入您的称呼！');
        return false;
      }
      var regTel = /^1[345789]\d{9}$/
      if (this.ContactTel == '' || !regTel.test(this.ContactTel)){
        this.Toast('请输入您的正确联系方式！');
        return false;
      }
      if (this.code != this.telcode || !this.telcode) {
        this.Toast('请填写正确的验证码！');
        return false;
      }
      if (this.pw == '') {
        this.Toast('请输入密码！');
        return false;
      };
      if(this.pw.length<6){
        this.Toast('密码长度至少6位！');
        return false;
      }
      if(this.pws !== this.pw){
        this.Toast('两次密码请填写一样！');
        return false;
      }
      if (this.classfiy=='1') {
          if(!this.roleType.value[0]){
        this.Toast('请选择角色！');
        return false;
      }
      }
    
      var query = {
          Contacts: this.Contacts,
          ContactTel: this.ContactTel,
          CropName:this.CropName,
          Pwd:this.pw,
          UserBizType:this.roleType.value[0],
          UserType:this.classfiy,
        };
      var _this = this;
      this.Ajax.post('RegisterUser',query).then(function(resp){
        if (resp.IsSuccess) {
          _this.MessageBox.alert('注册成功，请保持电话畅通！').then(action => {
            _this.$router.push({
              path:'/login'
            });
          });
        } else {
          _this.Toast({
            message: resp.ErrorMessage || '注册失败',
          });
        }
      });
    },
  }
};
</script>